<template>
	<view class="repair-page">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<view class="nav-back" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="nav-title">我的订单</text>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">○</text>
			</view>
		</view>
		
		<!-- 标签栏 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{active: currentTab === 0}" @click="switchTab(0)">进行中</view>
			<view class="tab-item" :class="{active: currentTab === 1}" @click="switchTab(1)">已完成</view>
		</view>
		
		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" @click.stop="showRepairMethodDropdown">
				<text class="filter-label">维修方式:</text>
				<view class="filter-value">
					<text class="filter-text">{{ selectedRepairMethod }}</text>
					<text class="filter-arrow">▼</text>
				</view>
				<!-- 维修方式下拉菜单 -->
				<view class="dropdown-menu" v-show="showRepairMethodMenu" @click.stop>
					<view class="dropdown-item" 
						v-for="(item, index) in repairMethodOptions" 
						:key="index"
						:class="{active: selectedRepairMethod === item}"
						@click.stop="selectRepairMethod(item)">
						{{ item }}
					</view>
				</view>
			</view>
			<view class="filter-item date-filter-item" @click.stop="toggleDatePicker">
				<text class="calendar-icon">📅</text>
				<text class="filter-label">预约日期</text>
				<text class="date-range-text" v-if="startDate && endDate">
					{{ formatDateDisplay(startDate) }} - {{ formatDateDisplay(endDate) }}
				</text>
			</view>
		</view>
		<!-- 点击外部区域关闭下拉菜单的遮罩层 -->
		<view class="dropdown-mask" v-show="showRepairMethodMenu" @click="showRepairMethodMenu = false"></view>
		
		<!-- 日期选择器展开区域 -->
		<view class="date-picker-expand" v-show="showDatePickerExpand">
			<view class="date-picker-header">
				<text class="date-picker-title">选择日期范围</text>
				<text class="date-picker-close" @click="toggleDatePicker">×</text>
			</view>
			<view class="date-picker-body">
				<view class="date-row">
					<text class="date-label">开始时间</text>
					<view class="date-inputs">
						<picker mode="date" :value="startDate" @change="onStartDateChange">
							<view class="date-input">{{ formatDateDisplay(startDate) }}</view>
						</picker>
						<picker mode="time" :value="startTime" @change="onStartTimeChange">
							<view class="time-input">{{ startTime || '00:00' }}</view>
						</picker>
					</view>
				</view>
				<view class="date-row">
					<text class="date-label">结束时间</text>
					<view class="date-inputs">
						<picker mode="date" :value="endDate" @change="onEndDateChange">
							<view class="date-input">{{ formatDateDisplay(endDate) }}</view>
						</picker>
						<picker mode="time" :value="endTime" @change="onEndTimeChange">
							<view class="time-input">{{ endTime || '23:59' }}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="date-picker-footer">
				<view class="date-btn cancel" @click="resetDateFilter">重置</view>
				<view class="date-btn confirm" @click="confirmDateFilter">确定</view>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<view class="order-content">
			<view class="tab-content" v-show="currentTab === 0">
				<view class="order-item" v-for="(item, index) in filteredInProgressOrders" :key="index" @click="goToOrderDetail(item)">
					<view class="order-info">
						<text class="order-field">维修单号: {{ item.repairNo }}</text>
						<text class="order-field">维修方式: {{ item.repairMethod }}</text>
						<text class="order-field">预约日期: {{ item.appointmentDate }}</text>
					</view>
				</view>
				<view class="empty-tip" v-if="filteredInProgressOrders.length === 0">
					<text>暂无进行中的订单</text>
				</view>
			</view>
			<view class="tab-content" v-show="currentTab === 1">
				<view class="order-item" v-for="(item, index) in filteredCompletedOrders" :key="index" @click="goToOrderDetail(item)">
					<view class="order-info">
						<text class="order-field">维修单号: {{ item.repairNo }}</text>
						<text class="order-field">维修方式: {{ item.repairMethod }}</text>
						<text class="order-field">预约日期: {{ item.appointmentDate }}</text>
					</view>
				</view>
				<view class="empty-tip" v-if="filteredCompletedOrders.length === 0">
					<text>暂无已完成的订单</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 0: 进行中, 1: 已完成
			showRepairMethodMenu: false, // 维修方式下拉菜单显示状态
			showDatePickerExpand: false, // 日期选择器展开状态
				selectedRepairMethod: '全部', // 选中的维修方式
				repairMethodOptions: ['全部', '到店维修', '上门取车'], // 维修方式选项
				startDate: '', // 开始日期
				startTime: '17:00', // 开始时间
				endDate: '', // 结束日期
				endTime: '17:00', // 结束时间
				// 进行中订单数据
				inProgressOrders: [
					{
						repairNo: '3535252',
						repairMethod: '到店维修',
						appointmentDate: '2022/11/10 11:00',
						status: 'inProgress',
						verifyCode: 'WE343235V',
						ownerName: '张',
						contact: '1993829282',
						pickupLocation: '山阳区32号',
						submitDate: '2022/11/08 12:34',
						vehicleType: '大客车',
						licensePlate: '豫J45323',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					},
					{
						repairNo: '3535252',
						repairMethod: '上门取车',
						appointmentDate: '2022/11/10 11:00',
						status: 'inProgress',
						verifyCode: 'WE343235V',
						ownerName: '张',
						contact: '1993829282',
						pickupLocation: '山阳区32号',
						submitDate: '2022/11/08 12:34',
						vehicleType: '大客车',
						licensePlate: '豫J45323',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					},
					{
						repairNo: '3535253',
						repairMethod: '到店维修',
						appointmentDate: '2022/11/12 14:00',
						status: 'inProgress',
						verifyCode: 'WE343236V',
						ownerName: '李',
						contact: '1993829283',
						submitDate: '2022/11/10 10:00',
						vehicleType: '小轿车',
						licensePlate: '豫A12345',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					},
					{
						repairNo: '3535254',
						repairMethod: '上门取车',
						appointmentDate: '2022/11/15 09:00',
						status: 'inProgress',
						verifyCode: 'WE343237V',
						ownerName: '王',
						contact: '1993829284',
						pickupLocation: '山阳区33号',
						submitDate: '2022/11/13 15:00',
						vehicleType: 'SUV',
						licensePlate: '豫B67890',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					}
				],
				// 已完成订单数据
				completedOrders: [
					{
						repairNo: '3535255',
						repairMethod: '到店维修',
						appointmentDate: '2022/10/20 10:00',
						status: 'completed',
						ownerName: '赵',
						contact: '1993829285',
						submitDate: '2022/10/18 14:00',
						vehicleType: '大客车',
						licensePlate: '豫C11111',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					},
					{
						repairNo: '3535256',
						repairMethod: '上门取车',
						appointmentDate: '2022/10/25 15:00',
						status: 'completed',
						ownerName: '钱',
						contact: '1993829286',
						pickupLocation: '山阳区34号',
						submitDate: '2022/10/23 16:00',
						vehicleType: '小轿车',
						licensePlate: '豫D22222',
						fullVehiclePhoto: '/static/tx1.jpg',
						repairPhotos: ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
					}
				]
			}
		},
		computed: {
			// 筛选后的进行中订单
			filteredInProgressOrders() {
				let orders = this.inProgressOrders;
				
				// 按维修方式筛选
				if (this.selectedRepairMethod !== '全部') {
					orders = orders.filter(order => order.repairMethod === this.selectedRepairMethod);
				}
				
				// 按日期范围筛选
				if (this.startDate && this.endDate) {
					orders = orders.filter(order => {
						const orderDate = this.parseDate(order.appointmentDate);
						const start = this.parseDate(`${this.startDate} ${this.startTime}`);
						const end = this.parseDate(`${this.endDate} ${this.endTime}`);
						return orderDate >= start && orderDate <= end;
					});
				}
				
				return orders;
			},
			// 筛选后的已完成订单
			filteredCompletedOrders() {
				let orders = this.completedOrders;
				
				// 按维修方式筛选
				if (this.selectedRepairMethod !== '全部') {
					orders = orders.filter(order => order.repairMethod === this.selectedRepairMethod);
				}
				
				// 按日期范围筛选
				if (this.startDate && this.endDate) {
					orders = orders.filter(order => {
						const orderDate = this.parseDate(order.appointmentDate);
						const start = this.parseDate(`${this.startDate} ${this.startTime}`);
						const end = this.parseDate(`${this.endDate} ${this.endTime}`);
						return orderDate >= start && orderDate <= end;
					});
				}
				
				return orders;
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 切换标签
			switchTab(tabIndex) {
				this.currentTab = tabIndex;
				// 切换标签时关闭下拉菜单
				this.showRepairMethodMenu = false;
			},
			// 显示/隐藏维修方式下拉菜单
			showRepairMethodDropdown() {
				this.showRepairMethodMenu = !this.showRepairMethodMenu;
				// 关闭日期选择器
				this.showDatePickerExpand = false;
			},
			// 选择维修方式
			selectRepairMethod(method) {
				this.selectedRepairMethod = method;
				this.showRepairMethodMenu = false;
			},
			// 切换日期选择器展开状态
			toggleDatePicker() {
				this.showDatePickerExpand = !this.showDatePickerExpand;
				// 关闭维修方式下拉菜单
				this.showRepairMethodMenu = false;
			},
			// 开始日期改变
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			// 开始时间改变
			onStartTimeChange(e) {
				this.startTime = e.detail.value;
			},
			// 结束日期改变
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			// 结束时间改变
			onEndTimeChange(e) {
				this.endTime = e.detail.value;
			},
			// 格式化日期显示（2023-03-02 -> 2023年03月02日）
			formatDateDisplay(dateStr) {
				if (!dateStr) return '请选择日期';
				const parts = dateStr.split('-');
				if (parts.length === 3) {
					return `${parts[0]}年${parts[1]}月${parts[2]}日`;
				}
				return dateStr;
			},
			// 确认日期筛选
			confirmDateFilter() {
				if (this.startDate && this.endDate) {
					// 验证日期范围
					const start = new Date(`${this.startDate} ${this.startTime}`);
					const end = new Date(`${this.endDate} ${this.endTime}`);
					if (start > end) {
						uni.showToast({
							title: '开始时间不能晚于结束时间',
							icon: 'none'
						});
						return;
					}
				}
				this.showDatePickerExpand = false;
			},
			// 重置日期筛选
			resetDateFilter() {
				this.startDate = '';
				this.startTime = '17:00';
				this.endDate = '';
				this.endTime = '17:00';
			},
			// 解析日期字符串为Date对象
			parseDate(dateStr) {
				// 处理格式: "2022/11/10 11:00" 或 "2022-11-10 17:00"
				let str = dateStr.replace(/\//g, '-');
				// 确保日期格式正确
				if (str.indexOf(':') === -1) {
					str += ' 00:00';
				}
				return new Date(str);
			},
			// 跳转到订单详情
			goToOrderDetail(item) {
				// 构建完整的订单详情数据
				const orderDetail = {
					repairNo: item.repairNo,
					status: item.status,
					verifyCode: item.verifyCode || 'WE343235V',
					ownerName: item.ownerName || '张',
					contact: item.contact || '1993829282',
					repairMethod: item.repairMethod,
					pickupLocation: item.pickupLocation || '山阳区32号',
					appointmentDate: item.appointmentDate,
					submitDate: item.submitDate || '2022/11/08 12:34',
					vehicleType: item.vehicleType || '大客车',
					licensePlate: item.licensePlate || '豫J45323',
					fullVehiclePhoto: item.fullVehiclePhoto || '/static/tx1.jpg',
					repairPhotos: item.repairPhotos || ['/static/tx1.jpg', '/static/tx1.jpg', '/static/tx1.jpg']
				};
				uni.navigateTo({
					url: `/pages/my/repairDetail?orderData=${encodeURIComponent(JSON.stringify(orderDetail))}`
				});
			}
		},
		onLoad() {
			// 初始化日期（可选）
		},
		onShow() {
			// 页面显示时关闭下拉菜单和日期选择器
			this.showRepairMethodMenu = false;
			this.showDatePickerExpand = false;
		}
	}
</script>

<style scoped>
	.repair-page {
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.top-nav {
		background-color: #2a6df6;
		background-image: url('/static/图层 1@3x.png');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		color: #fff;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: #fff;
		font-size: 48rpx;
		font-weight: 300;
		line-height: 1;
	}

	.nav-title {
		font-size: 18px;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 32rpx;
	}

	/* 标签栏 */
	.tab-bar {
		display: flex;
		background-color: #2a6df6;
		color: #fff;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0 8px;
		font-size: 16px;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40px;
		height: 2px;
		background-color: #fff;
	}

	/* 筛选栏 */
	.filter-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.filter-item {
		display: flex;
		align-items: center;
		position: relative;
	}

	.date-filter-item {
		flex: 1;
		justify-content: flex-end;
	}

	.date-range-text {
		font-size: 24rpx;
		color: #2a6df6;
		margin-left: 10rpx;
		max-width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.filter-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.filter-value {
		display: flex;
		align-items: center;
		background-color: #2a6df6;
		color: #fff;
		padding: 8rpx 20rpx;
		border-radius: 8rpx;
	}

	.filter-text {
		font-size: 28rpx;
		margin-right: 8rpx;
	}

	.filter-arrow {
		font-size: 20rpx;
	}

	.calendar-icon {
		font-size: 32rpx;
		margin-right: 8rpx;
		line-height: 1;
	}

	/* 下拉菜单 */
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #fff;
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		margin-top: 10rpx;
		min-width: 200rpx;
	}

	.dropdown-item {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1px solid #f0f0f0;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.dropdown-item.active {
		color: #2a6df6;
		background-color: #f0f7ff;
	}

	/* 日期选择器展开区域 */
	.date-picker-expand {
		background-color: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.date-picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.date-picker-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.date-picker-close {
		font-size: 48rpx;
		color: #999;
		line-height: 1;
	}

	.date-picker-body {
		padding: 30rpx;
	}

	.date-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.date-row:last-child {
		margin-bottom: 0;
	}

	.date-label {
		font-size: 28rpx;
		color: #333;
		width: 150rpx;
	}

	.date-inputs {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex: 1;
	}

	.date-input,
	.time-input {
		flex: 1;
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		text-align: center;
	}

	.date-picker-footer {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.date-btn {
		flex: 1;
		text-align: center;
		padding: 30rpx;
		font-size: 32rpx;
	}

	.date-btn.cancel {
		color: #666;
		border-right: 1px solid #f0f0f0;
	}

	.date-btn.confirm {
		color: #2a6df6;
		font-weight: bold;
	}

	/* 订单列表 */
	.order-content {
		padding: 0 20rpx;
	}

	.order-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.order-info {
		display: flex;
		flex-direction: column;
	}

	.order-field {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		line-height: 1.6;
	}

	.order-field:last-child {
		margin-bottom: 0;
	}

	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	/* 下拉菜单遮罩层 */
	.dropdown-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background-color: transparent;
	}
</style>
